<template>
  <div class="wrapper">
    <el-descriptions class="userInfo" size="large" title="用户信息">
      <template slot="extra">
        <el-button id="cancelBt" type="info" size="small" @click="cancelModify" v-if="flag">取消</el-button>
        <el-button id="modifyBt" type="primary" size="small" @click="modifyInfo"><em v-if="!flag">编辑</em><em
          v-else>保存</em></el-button>
      </template>
      <el-descriptions-item label="用户名"><label v-if="!flag">{{userInfo.username}}</label>
        <el-input size="mini" v-if="flag" v-model="userInfo.username"/>
      </el-descriptions-item>
      <el-descriptions-item label="手机号"><label v-if="!flag">{{userInfo.phone}}</label>
        <el-input size="mini" v-if="flag" v-model="userInfo.phone"/>
      </el-descriptions-item>
      <el-descriptions-item label="身份证号"><label v-if="!flag">{{userInfo.identity}}</label>
        <el-input disabled size="mini" v-if="flag" v-model="userInfo.identity"/>
      </el-descriptions-item>
      <el-descriptions-item label="联系地址"><label v-if="!flag">{{userInfo.address}}</label>
        <el-input size="mini" v-if="flag" v-model="userInfo.address"/>
      </el-descriptions-item>
      <el-descriptions-item label="用户身份"><label v-if="!flag">{{userInfo.status}}</label>
        <el-input disabled size="mini" v-if="flag" v-model="userInfo.status"/>
      </el-descriptions-item>
      <el-descriptions-item label="所属企业"><label v-if="!flag">{{enterpriseInfo.supplierName}}</label>
        <el-input disabled size="mini" v-if="flag" v-model="enterpriseInfo.supplierName"/>
      </el-descriptions-item>
      <el-descriptions-item label="用户状态">
        <el-tag size="small">{{userInfo.available}}</el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <div class="weiTiDiv">
      <el-descriptions class="baseInfo" size="large" column="2" title="企业基本信息">
        <el-descriptions-item label="公司名称"><label v-if="!flag">{{enterpriseInfo.supplierName}}</label>
          <el-input disabled size="mini" v-if="flag" v-model="enterpriseInfo.supplierName"/>
        </el-descriptions-item>
        <el-descriptions-item label="企业类型"><label v-if="!flag">{{enterpriseInfo.enterpriseType}}</label>
          <el-input disabled size="mini" v-if="flag" v-model="enterpriseInfo.enterpriseType"/>
        </el-descriptions-item>
        <el-descriptions-item label="法人代表"><label v-if="!flag">{{enterpriseInfo.legalPerson}}</label>
          <el-input disabled size="mini" v-if="flag" v-model="enterpriseInfo.legalPerson"/>
        </el-descriptions-item>
        <el-descriptions-item label="法人身份证"><label v-if="!flag">{{enterpriseInfo.legalPersonIdNumber}}</label>
          <el-input disabled size="mini" v-if="flag" v-model="enterpriseInfo.legalPersonIdNumber"/>
        </el-descriptions-item>
        <el-descriptions-item label="注册地区"><label v-if="!flag">{{enterpriseInfo.registrationArea}}</label>
          <el-input disabled size="mini" v-if="flag" v-model="enterpriseInfo.registrationArea"/>
        </el-descriptions-item>
        <el-descriptions-item label="企业邮箱"><label v-if="!flag">{{enterpriseInfo.enterpriseMailbox}}</label>
          <el-input size="mini" v-if="flag" v-model="enterpriseInfo.enterpriseMailbox"/>
        </el-descriptions-item>
        <el-descriptions-item label="联系电话"><label v-if="!flag">{{enterpriseInfo.contactNumber}}</label>
          <el-input size="mini" v-if="flag" v-model="enterpriseInfo.contactNumber"/>
        </el-descriptions-item>
        <el-descriptions-item label="传真"><label v-if="!flag">{{enterpriseInfo.fax}}</label>
          <el-input size="mini" v-if="flag" v-model="enterpriseInfo.fax"/>
        </el-descriptions-item>
        <el-descriptions-item label="邮政编码"><label v-if="!flag">{{enterpriseInfo.postalCode}}</label>
          <el-input size="mini" v-if="flag" v-model="enterpriseInfo.postalCode"/>
        </el-descriptions-item>
        <el-descriptions-item label="注册资金（万元）"><label v-if="!flag">{{enterpriseInfo.registerFund}}</label>
          <el-input disabled size="mini" v-if="flag" v-model="enterpriseInfo.registerFund"/>
        </el-descriptions-item>
        <el-descriptions-item label="营业执照号"><label v-if="!flag">{{enterpriseInfo.businessCertificateId}}</label>
          <el-input disabled size="mini" v-if="flag" v-model="enterpriseInfo.businessCertificateId"/>
        </el-descriptions-item>
        <el-descriptions-item label="组织机构代码"><label v-if="!flag">{{enterpriseInfo.organizationCode}}</label>
          <el-input disabled size="mini" v-if="flag" v-model="enterpriseInfo.organizationCode"/>
        </el-descriptions-item>
        <el-descriptions-item label="经营许可证编号"><label v-if="!flag">{{enterpriseInfo.businessLicenseId}}</label>
          <el-input disabled size="mini" v-if="flag" v-model="enterpriseInfo.businessLicenseId"/>
        </el-descriptions-item>
        <el-descriptions-item label="税务登记证代码"><label
          v-if="!flag">{{enterpriseInfo.taxRegistrationCertificateCode}}</label>
          <el-input disabled size="mini" v-if="flag" v-model="enterpriseInfo.taxRegistrationCertificateCode"/>
        </el-descriptions-item>
        <el-descriptions-item label="开户银行"><label v-if="!flag">{{enterpriseInfo.bankOfDeposit}}</label>
          <el-input size="mini" v-if="flag" v-model="enterpriseInfo.bankOfDeposit"/>
        </el-descriptions-item>
        <el-descriptions-item label="账号"><label v-if="!flag">{{enterpriseInfo.accountNumber}}</label>
          <el-input size="mini" v-if="flag" v-model="enterpriseInfo.accountNumber"/>
        </el-descriptions-item>
        <el-descriptions-item label="煤源存放地点、数量、质量"><label v-if="!flag">{{enterpriseInfo.coalDescription}}</label>
          <el-input type="textarea" v-if="flag" v-model="enterpriseInfo.coalDescription"/>
        </el-descriptions-item>
        <el-descriptions-item label="运输方式及保障能力"><label v-if="!flag">{{enterpriseInfo.typeOfShipping}}</label>
          <el-input type="textarea" v-if="flag" v-model="enterpriseInfo.typeOfShipping"/>
        </el-descriptions-item>
        <el-descriptions-item label="应商介绍"><label v-if="!flag">{{enterpriseInfo.introductionToYingshang}}</label>
          <el-input type="textarea" v-if="flag" v-model="enterpriseInfo.introductionToYingshang"/>
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <!--<div class="weiTiDiv2">-->
      <!--<el-descriptions class="enterpriseInfo" size="large" column="1" title="企业资质">-->
        <!--<el-descriptions-item label="营业执照">-->
          <!--<el-image :src="enterpriseInfo.buLicense"/>-->
        <!--</el-descriptions-item>-->
        <!--<el-descriptions-item label="税务登记证">-->
          <!--<el-image :src="enterpriseInfo.taxRegiSrtificate"/>-->
        <!--</el-descriptions-item>-->
        <!--<el-descriptions-item label="组织机构代码证">-->
          <!--<el-image :src="enterpriseInfo.organCodeCertificate"/>-->
        <!--</el-descriptions-item>-->
        <!--<el-descriptions-item label="开户许可证">-->
          <!--<el-image :src="enterpriseInfo.accountOpenPermit"/>-->
        <!--</el-descriptions-item>-->
        <!--<el-descriptions-item label="煤炭经营许可证">-->
          <!--<el-image :src="enterpriseInfo.coalBuLicense"/>-->
        <!--</el-descriptions-item>-->
        <!--<el-descriptions-item label="法人身份证">-->
          <!--<el-image :src="enterpriseInfo.corporateIdCard"/>-->
        <!--</el-descriptions-item>-->
      <!--</el-descriptions>-->
    <!--</div>-->
  </div>
</template>

<script>
  import Common from "../common/Common";

  export default {
    name: "UserInfoManage",
    data() {
      return {
        flag: false,
        userInfo: {
          id: '',
          username: '',
          identity: '',
          phone: '',
          status: '',
          address: '',
          enterpriseId: '',
          available: '',
          avatar: '',
          userpaw: ''
        },
        enterpriseInfo: {
          //基本信息
          enterpriseId: '',
          supplierName: '',
          enterpriseType: '',
          legalPerson: '',
          legalPersonIdNumber: '',
          registrationArea: '',
          enterpriseMailbox: '',
          contactNumber: '',
          fax: '',
          postalCode: '',
          registerFund: '',
          businessCertificateId: '',
          organizationCode: '',
          businessLicenseId: '',
          taxRegistrationCertificateCode: '',
          bankOfDeposit: '',
          accountNumber: '',
          coalDescription: '',
          typeOfShipping: '',
          introductionToYingshang: '',
          //企业资质
          buLicense: '-1',
          taxRegiSrtificate: '-1',
          organCodeCertificate: '-1',
          accountOpenPermit: '-1',
          coalBuLicense: '-1',
          corporateIdCard: '-1'
        },
        //保存副本
        oldUserInfo: {},
        oldEnterpriseInfo: {}
      }
    },
    methods: {
      modifyInfo() {
        if (this.flag) {
          this.$confirm('确认要保存修改吗？', '提示', {
            confirmButtonText: '确认',
            cancelButtonText: '返回',
            type: 'warning'
          }).then(() => {
            this.$message({
              type: 'success',
              message: '保存修改成功！'
            });
            var data = {'userInfo': this.userInfo, 'enterpriseInfo': this.enterpriseInfo};
            data = JSON.stringify(data);
            this.axios.post(Common.API + 'userInfoManage/modifyInfo', data, {
              headers: {'Content-Type': 'application/json;charset=UTF-8'},
              dataType: JSON
            }).then(res => {
              console.log(res);
              this.userInfo.available = '待审核';//修改信息后待后台审核
              //将新值保存到副本中
              this.oldUserInfo = Object.assign({}, this.userInfo);
              this.oldEnterpriseInfo = Object.assign({}, this.enterpriseInfo);
            }).catch(error => {
              console.log(error);
            });
            this.flag = !this.flag;
          }).catch(() => {

          });
        } else {
          this.flag = !this.flag;
        }
      },
      cancelModify() {
        this.$confirm('你确定要放弃修改吗？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '返回',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'info',
            message: '放弃修改!'
          });
          //还原原值
          this.userInfo = Object.assign({}, this.oldUserInfo);
          this.enterpriseInfo = Object.assign({}, this.oldEnterpriseInfo);
          this.flag = !this.flag;
        }).catch(() => {

        });
      }
    },
    mounted() {
      var currentUser = Common.userInfo.id;
      this.axios.get(Common.API + 'userInfoManage/getUserInfo?id=' + currentUser).then(res => {
        console.log("*((",res.data.userInfo)
        this.userInfo = res.data.userInfo;
        this.enterpriseInfo = res.data.enterpriseInfo;
        if (this.userInfo.status == '0') {
          this.userInfo.status = '需求方';
          this.enterpriseInfo.enterpriseType = '需求商';
        } else {
          this.userInfo.status = '供应方';
          this.enterpriseInfo.enterpriseType = '供应商';
        }
        //深拷贝一份作为副本
        this.oldUserInfo = Object.assign({}, this.userInfo);
        this.oldEnterpriseInfo = Object.assign({}, this.enterpriseInfo);
      }).catch(error => {
        console.log(error);
      })
    }
  }
</script>

<style scoped>
  .wrapper {
    margin-left: 10%;
    margin-right: 10%;
    /*padding-top: 50px;*/
    /*padding-bottom: 50px;*/
  }

  .userInfo {

  }

  .weiTiDiv {
    /*width: 75%;*/

  }

  .weiTiDiv2 {
    float: right;
  }

  .baseInfo {
    margin-top: 30px;
    /*padding-top: 10px*/
  }

  .enterpriseInfo {
    margin-top: 30px;
    padding-top: 10px
  }

  #modifyBt {
    margin-top: 10px;
    margin-right: 10px;
  }

  em {
    font-style: normal;
  }

  label {
    color: #409EFF;
  }

  .enterpriseInfo image {
    width: 100px;
    height: 100px;
  }
</style>
